<template>
  <div class="xpxs">
    <!-- 筛选栏 -->
    <div class="query">
      <my-form :list="filter" @changeFormData="changeConditions"></my-form>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="search">搜索</my-button>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset">重置</my-button>
      <div class="iconfont bottom" @click="click">&#xe67b;</div>
      <!-- 隐藏的一栏 -->
      <div class="querys" v-show="isShow">
        <my-form :list="filters" @changeFormData="changeConditionss"></my-form>
        <div class="iconfont top" @click="click">&#xe83d;</div>
      </div>
    </div>

    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="report">
          <my-button bgc="#387CF7">
            <a :href="getLinkUrl()" target="_Blank">查看报表</a>
          </my-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="Triggerword">触发词反馈</my-button>
        </div>
        <div class="list-refresh">
          <my-dropdown-list :list="tableColumn" @change="changeTableColumn"></my-dropdown-list>
          <div class="iconfont icon" @click="refreshdata">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table v-if="tableHeight" border :data="dataSource" :height="tableHeight" row-class-name="row-class-name"
          header-row-class-name="header-row-class-name" style="width: 100%" @selection-change="selectionChange">
          <el-table-column v-if="tableColumn.comment_from.show" prop="comment_from" label="平台" min-width="80">
            <template slot-scope="scope">{{
              platfromChange(scope.row.comment_from)
            }}</template>
          </el-table-column>
          <el-table-column v-if="tableColumn.type.show" prop="type" label="类型" min-width="80">
            <template slot-scope="scope">{{
              typeChange(scope.row.type)
            }}</template>
          </el-table-column>
          <el-table-column v-if="tableColumn.keyword.show" prop="keyword" label="关键词" min-width="80">
          </el-table-column>
          <el-table-column v-if="tableColumn.title_new.show" prop="title_new" label="来源" width="80">
            <template slot-scope="scope">
              <div class="slot-row">
                <div class="from" @click="handleClickFrom(scope.row)">
                  <!-- {{ scope.row.title_new }} -->
                  查看
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.comment.show" prop="comment" label="内容" min-width="140">
          </el-table-column>
          <el-table-column v-if="tableColumn.comment_author.show" prop="comment_author" label="名称" width="100">
          </el-table-column>
          <el-table-column v-if="tableColumn.account.show" prop="account" label="账号" min-width="130">
            <template slot-scope="scope">
              <div class="slot-row">
                <span v-html="scope.row.account"></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.qrcode_new.show" prop="qrcode_new" label="二维码" width="130">
            <template slot-scope="scope">
              <div class="slot-row">
                <div v-if="scope.row.type == 0" class="slot-item">
                  <div v-if="scope.row.comment_from == 'douyin'" @click="barcode(scope.row)">
                    私信 扫码加好友
                  </div>
                  <div v-if="scope.row.comment_from == 'haokan'" @click="barcode(scope.row)">
                    查看视频
                  </div>
                  <div v-if="scope.row.comment_from == 'kuaishou'" @click="barcode(scope.row)">
                    私信 扫码加好友
                  </div>
                  <div v-if="scope.row.comment_from == 'xiaohongshu'" @click="barcode(scope.row)">
                    私信 扫码加好友
                  </div>
                </div>
                <div v-if="scope.row.type == 1" class="slot-item">
                  <div v-if="scope.row.comment_from == 'douyin'" @click="barcode(scope.row)">
                    私信 扫码加好友
                  </div>
                  <div v-if="scope.row.comment_from == 'kuaishou'" @click="barcode(scope.row)">
                    私信 扫码加好友
                  </div>
                  <div v-if="scope.row.comment_from == 'xiaohongshu'" @click="barcode(scope.row)">
                    私信 扫码加好友
                  </div>
                </div>
                <div v-if="scope.row.type == 2" class="slot-item">
                  <div v-if="scope.row.comment_from == 'douyin'">
                    <span @click="reply(scope.row)">回复</span>
                    <span @click="barcode(scope.row)">扫码查看</span>
                  </div>
                </div>
                <div v-if="scope.row.type == 3" class="slot-item">
                  <div v-if="scope.row.comment_from == 'douyin'" @click="barcode(scope.row)">
                    扫码查看
                  </div>
                  <div v-if="scope.row.comment_from == 'kuaishou'" @click="barcode(scope.row)">
                    扫码查看
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column v-if="tableColumn.status.show" prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <my-switch :value.sync="scope.row.status" @changeSwitchValue="changeSwitchValue(scope.row)"></my-switch>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.createtime.show" prop="createtime" label="获取时间" width="130">
          </el-table-column>
          <el-table-column label="操作" prop="operat_new" width="100">
            <template slot-scope="scope">
              <my-button v-if="scope.row.operat_new == '申诉'" bgc="#FFEEEE" border="#FADBDB" fontColor="#F78385"
                @click="appeal(scope.row)">{{ scope.row.operat_new }}</my-button>
              <my-button v-if="scope.row.operat_new == '申诉中'" bgc="#f7d264" @click="appeal(scope.row)">
                {{ scope.row.operat_new }}
              </my-button>

              <el-tooltip v-if="scope.row.operat_new == '拒绝'" effect="light" :content="scope.row.auditnote_new" placement="top-start">
                <my-button  @click="appeal(scope.row)" bgc="#FFEEEE" border="#FADBDB" fontColor="#F78385">{{ scope.row.operat_new }}</my-button>
              </el-tooltip>


            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination background :current-page="currentPage" :page-size="pageSize" :page-sizes="[15,25,30]"
          layout="total,sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <!-- 二维码弹窗 -->
    <el-dialog :visible.sync="showSuffix" :show-close="false" top="30vh" width="16%" class="qrcode-dialog">
      <div class="body">
        <div class="iconfont icon" @click="showSuffix = false">&#xe608;</div>
        <div class="qrcode-bg">
          <img :src="qrCode" alt="" class="qrCode" />
        </div>
      </div>
    </el-dialog>

    <!-- 申诉弹窗 -->
    <el-dialog :visible.sync="showConfirm" :show-close="false" top="25vh" width="25%" class="submit-dialog">
      <div class="header">
        <div class="title">申诉</div>
        <div class="iconfont icon" @click="showConfirm = false">&#xe608;</div>
      </div>
      <div class="body">
        <input v-model="value" type="text" placeholder="请输入申诉理由,必填" />
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="appealYes">确认</my-button>
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="showConfirm = false">取消</my-button>
      </div>
    </el-dialog>
    <!-- 回复弹窗 -->
    <el-dialog :visible.sync="scancodereply" :show-close="false" top="25vh" width="20%" class="submit-dialog">
      <div class="header">
        <div class="title">信息</div>
        <div class="iconfont icon" @click="scancodereply = false">&#xe608;</div>
      </div>
      <div class="body">
        <input type="text" v-model="value1" placeholder="请输入回复内容" />
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="codereply">确认</my-button>
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="scancodereply = false">取消</my-button>
      </div>
    </el-dialog>

    <el-dialog title="触发词反馈列表" :visible.sync="dialogTableVisible">
      <template>
        <div style="margin-bottom: 20px; display: block;">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-input placeholder="触发词" v-model="input" clearable>
              </el-input>
            </el-col>
            <el-col :span="6">
              <my-button style="display: block;" bgc="#387CF7" border="#387CF7" fontColor="#fff" @click="wordadd">添加
              </my-button>
            </el-col>
          </el-row>
        </div>
        <el-table :data="gridData" border style="width: 100%">
          <el-table-column label="关键词">
            <template slot-scope="scope">{{scope.row.word}}</template>
          </el-table-column>
          <el-table-column prop="comment" label="操作">
            <template slot-scope="scope">
              <my-button bgc="#FFEEEE" border="#FADBDB" fontColor="#F78385" @click="worddele(scope.row.id)">删除
              </my-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import myButton from "@/components/myButton.vue";
  import myForm from "@/components/myForm.vue";
  import mySwitch from "@/components/mySwitch.vue";
  import myInput from "@/components/myInput.vue";
  import myDropdownList from "@/components/myDropdownList.vue";
  import option from "@/data/option.js";
  export default {
    components: {
      myButton,
      myForm,
      mySwitch,
      myInput,
      myDropdownList,
    },
    data() {
      return {
        replayvalue: "",
        dialogTableVisible: false,
        value: "",
        input: "",
        value1: "",
        scancodereply: false,
        showConfirm: false,
        showSuffix: false,
        appealRow: {},
        replyRow: {},
        gridData: {},
        filter: {
          type: {
            type: "select",
            label: "类型",
            value: "",
            placeholder: "",
            op: "=",
            list: [{
                label: "全部",
                value: "",
              },
              {
                label: "关键词",
                value: "0",
              },
              {
                label: "行业达人",
                value: "1",
              },
              {
                label: "我的视频",
                value: "2",
              },
              {
                label: "拓客码",
                value: "3",
              },
            ],
          },
          keyword: {
            type: "input",
            label: "关键词",
            value: "",
            op: "%*%",
            placeholder: "请输入关键词",
          },
          video_title: {
            type: "input",
            label: "来源",
            value: "",
            op: "%*%",
            placeholder: "请输入来源",
            list: option.vedioTypeList,
          },
          status: {
            type: "select",
            label: "状态",
            value: "",
            placeholder: "",
            op: "=",
            list: [{
                label: "未处理",
                value: "0",
              },
              {
                label: "已处理",
                value: "1",
              },
            ],
          },
        }, // 表格列表搜索条件
        filters: {
          comment: {
            type: "input",
            label: "内容",
            value: "",
            op: "%*%",
            placeholder: "请输入内容",
          },
          comment_from: {
            type: "select",
            label: "客户端",
            value: "",
            placeholder: "",
            op: "=",
            list: [{
                label: "全部",
                value: "",
              },
              {
                label: "抖音",
                value: "douyin",
              },
              {
                label: "快手",
                value: "kuaishou",
              },
              {
                label: "小红书",
                value: "xiaohongshu",
              },
            ],
          },

          status: {
            type: "select",
            label: "状态",
            value: "",
            op: "=",
            placeholder: "请输入来源",
            list: [{
                label: "-全部-",
                value: "",
              },
              {
                label: "未处理",
                value: 0,
              },
              {
                label: "已处理",
                value: 1,
              },
            ],
          },
        }, // 表格列表搜索条件
        dataSource: [],
        tableColumn: {
          comment_from: {
            show: true,
            text: "平台",
          },
          type: {
            show: true,
            text: "类型",
          },
          keyword: {
            show: true,
            text: "关键词",
          },
          title_new: {
            show: true,
            text: "来源",
          },
          comment: {
            show: true,
            text: "内容",
          },
          comment_author: {
            show: true,
            text: "名称",
          },
          account: {
            show: true,
            text: "账号",
          },
          qrcode_new: {
            show: true,
            text: "二维码",
          },
          status: {
            show: true,
            text: "状态",
          },
          createtime: {
            show: true,
            text: "添加时间",
          },
        },
        platform: option.vedioTypeList,
        haoKanForm: {
          appid: {
            label: "APP ID",
            value: "",
            required: true,
            placeholder: "",
          },
          name: {
            label: "昵称",
            value: "",
            required: true,
            placeholder: "",
          },
          token: {
            label: "Token",
            value: "",
            required: true,
            placeholder: "",
          },
        },
        tableHeight: 0,
        currentPage: 1,
        pageSize: 15,
        total: 0,
        selectedRows: [],
        qrCode: "",
        showHaoKan: false,
        showConfirm: false,
        isShow: false,
        timer: null,
      };
    },

    mounted() {
      this.tableHeight = document.querySelector(".table").offsetHeight;
      window.onresize = () => {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.tableHeight = document.querySelector(".table").offsetHeight;
        }, 500);
      };
      this.getData();
    },
    beforeDestroy() {
      window.onresize = null;
    },
    methods: {
      click() {
        this.isShow = !this.isShow;
      },
      getLinkUrl() {
        let user = JSON.parse(window.localStorage.getItem("person"));
        let baseUrl = window.location.protocol + "//" + window.location.host;
        console.log(baseUrl + '/index/report?userkey=' + user.userkey)
        return baseUrl + '/index/report?userkey=' + user.userkey;
      },
      // 获取列表
      async getData() {
        let filter = {};
        let op = {};
        for (let key in this.filter) {
          if (this.filter[key].value === "") {
            continue;
          }
          filter[key] = this.filter[key].value;
          op[key] = this.filter[key].op;
        }
        for (let key in this.filters) {
          if (this.filters[key].value === "") {
            continue;
          }
          filter[key] = this.filters[key].value;
          op[key] = this.filters[key].op;
        }

        let res = await this.$api.xpxs_getData({
          page: this.currentPage,
          limit: this.pageSize,
          filter,
          op,
        });
        console.log(res);
        this.dataSource = res.data;
        this.total = res.count;
      },
      platfromChange(val) {
        let type = [{
            name: "DY",
            value: "douyin"
          },
          {
            name: "KS",
            value: "kuaishou"
          },
          {
            name: "XHS",
            value: "xiaohongshu"
          },
          {
            name: "HK",
            value: "haokan"
          },
        ];
        let result = type.find((v) => v.value == val);
        return result.name;
      },
      typeChange(val) {
        let type = [{
            name: "拓客码",
            value: "3"
          },
          {
            name: "我的视频",
            value: "2"
          },
          {
            name: "行业达人",
            value: "1"
          },
          {
            name: "关键词",
            value: "0"
          },
        ];
        let result = type.find((v) => v.value == val);
        return result.name;
      },
      search() {
        this.currentPage = 1;
        this.dataSource = [];
        this.getData();
      },
      // 重置筛选条件
      reset() {
        for (let key in this.filter) {
          this.filter[key].value = "";
          this.getData();
        }
      },
      //刷新
      refreshdata() {
        this.currentPage = 1;
        this.dataSource = [];
        this.getData();
      },
      //修改状态
      async changeSwitchValue(row) {
        await this.$api.xpxs_changeStatus({
          id: row.id,
          field: "status",
          value: row.status ? 0 : 1,
        });
        this.getData();
      },
      //二维码
      async barcode(row) {
        if (row.video_src == "") {
          this.$alert('用户信息获取失败', '提示', {
            confirmButtonText: '确定',
          });
        } else {
          let qrCode = await this.$api.xpxs_barcode({
            qrkey: row.id,
            qrtype: row.qrtype_new,
            type: "qt0723",
          });
          this.qrCode = "data:image/png;base64," + qrCode;
          this.showSuffix = true;
        }
      },
      //触发次反馈
      async Triggerword() {
        let qrCode = await this.$api.trigger_word({
          status1: 1
        });
        if (qrCode.code == 200) {
          this.gridData = qrCode.data
        }
        this.dialogTableVisible = true
      },
      //删除触发词
      async worddele(id) {
        let res = await this.$api.trigger_word({
          type: 'delete',
          id: id
        });
        this.Triggerword();
      },
      //添加触发词
      async wordadd() {
        if (this.input == "") {
          return this.$message({
            message: "触发词不能为空",
            type: "warning",
          });
        }
        let res = await this.$api.trigger_wordadd({
          type: 'add',
          keyword: this.input,
        });
        if(res.code != 0){
          this.Triggerword();
        }else{
          return this.$message({
            message: res.msg,
            type: "warning",
          });
        }

      },
      //二维码  回复
      reply(row) {
        console.log(row);
        this.scancodereply = true;
        this.replyRow = row;
      },
      async codereply() {
        // console.log(this.value1);
        let res = await this.$api.xpxs_scancodereply({
          vid: this.replyRow.video_id,
          cid: this.replyRow.account_url_new + "==",
          reply: this.value1,
        });
        this.value1 = "";
        this.scancodereply = false;
        if (res.msg == "回复成功") {
          this.$message({
            message: "回复成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "回复失败",
            type: "warning",
          });
        }
      },
      //申诉
      appeal(row) {
        this.showConfirm = true;
        this.appealRow = row;
      },
      handleClickFrom(row) {
        window.open(row.video_src);
      },
      async appealYes() {
        await this.$api.xpxs_appeal({
          id: this.appealRow.id,
          // username:'',
          auditnote: this.value,
        });
        this.showConfirm = false;
        this.value = "";
        this.getData();

      },
      // 表格
      // 选中行改变时
      selectionChange(selection) {
        this.selectedRows = selection;
      },

      // 页码跳转
      handleCurrentChange(page) {
        this.currentPage = page;
        this.getData();
        console.log(page);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData();

      },
      // 确认
      confirm() {},
      //筛选选项
      changeConditions(res) {
        this.filter[res.key].value = res.val;
      },
      changeConditionss(res) {
        this.filters[res.key].value = res.val;
      },
      // 控制表格显示哪几列
      changeTableColumn(key) {
        this.tableColumn[key].show = !this.tableColumn[key].show;
      },
    },
  };
</script>

<style lang="less" scoped>
  .xpxs {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 112px 0 0px 0;
    box-sizing: border-box;
  }

  .query {
    position: absolute;
    top: 52px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    background-color: #fff;

    .button {
      width: 60px;
      height: 30px;
      border-radius: 3px;
      margin-left: 15px;
    }

    .bottom {
      position: absolute;
      right: 20px;
      color: #e4e4e4;
      font-size: 18px;
      cursor: pointer;
      user-select: none;
    }

    .querys {
      position: absolute;
      top: 65px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 52px;
      background-color: #fff;
      z-index: 10;

      .top {
        position: absolute;
        right: 20px;
        color: #e4e4e4;
        font-size: 18px;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 65px 0 80px 0;
    box-sizing: border-box;
    background-color: #fff;

    .action {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 65px;
      padding: 0 34px;
      box-sizing: border-box;

      .report {
        display: flex;
        align-items: center;

        /deep/ .button {
          width: 107px;
          height: 40px;
          border-radius: 3px;
          font-size: 13px;
          font-weight: bold;

          a {
            background-color: transparent;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            color: #fff;
          }
        }
      }

      .list-refresh {
        position: absolute;
        bottom: 12px;
        right: 40px;
        display: flex;
        align-items: center;
        width: 60px;

        .icon {
          font-size: 17px;
          color: rgba(212, 212, 212);
          cursor: pointer;
          margin-left: 20px;
        }
      }
    }

    .table {
      width: 100%;
      height: 100%;
      padding: 0 34px;
      box-sizing: border-box;

      /deep/ .header-row-class-name {
        height: 65px;

        th {
          background-color: #f0f4ff;
        }

        .cell {
          color: #333;
          text-align: center;
        }
      }

      /deep/ .row-class-name {
        height: 80px;

        .cell {
          display: flex;
          justify-content: center;
          text-align: center;

          .slot-row {
            display: flex;
            align-items: center;
            justify-content: center;

            .slot-item {
              div {
                color: blue;
                cursor: pointer;
              }
            }

            .from {
              cursor: pointer;
            }

            .barcode {
              color: blue;
              cursor: pointer;
            }

            .icon-block {
              display: flex;
              align-items: center;
              height: 18px;
              padding: 0 8px;
              border-right: 2px solid #c7c7c7;

              .icon {
                color: #333;
                font-size: 20px !important;
              }

              .number {
                color: #333;
                font-size: 16px;
              }
            }

            :last-child {
              border-right: 0;
            }
          }

          .button {
            width: 60px;
            height: 24px;
          }
        }
      }

      /deep/ .el-table__body-wrapper {
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 10px;
          /*高宽分别对应横竖滚动条的尺寸*/
          height: 10px;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 5px;
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: rgb(230, 228, 228);
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          background: #fff;
        }
      }
    }
  }

  .page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;

    /deep/ .active {
      background-color: #387CF7 !important;
    }
  }

  // 二维码 弹窗样式
  .qrcode-dialog {
    /deep/ .el-dialog__header {
      padding: 0;
    }

    /deep/ .el-dialog__body {
      padding: 0px 0px;

      .body {
        position: relative;

        width: 310px;
        height: 310px;
        padding: 40px;
        box-sizing: border-box;
        background-color: #fff;

        .icon {
          position: absolute;
          right: 15px;
          top: 15px;
          color: rgb(202, 201, 201);
          font-size: 14px;
          font-weight: bold;
          cursor: pointer;
          user-select: none;
        }

        .qrcode-bg {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background: url("../../assets/img/qrCode_bg.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 20px;
          box-sizing: border-box;

          .qrCode {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  // submit-dialog"
  .submit-dialog {
    /deep/ .el-dialog__header {
      padding: 0;
    }

    /deep/ .el-dialog__body {
      padding: 0px 0px;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        padding: 15px 28px;
        box-sizing: border-box;
        color: #333;
        border-bottom: 1px solid #e7e7e7;
        background-color: #f0f4ff;

        .icon {
          color: #999;
          cursor: pointer;
          user-select: none;
        }
      }

      .body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;

        input {
          width: 100%;
          height: 40px;
          text-indent: 5px;
          font-size: 15px;
          border: 1px solid #e7e7e7;
          outline: none;
        }
      }

      .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 0px 20px 0;
        box-sizing: border-box;

        .button {
          width: 120px;
          height: 36px;
          margin-left: 15px;
        }
      }
    }
  }
</style>
